<template>
  <div class="page-container">
    <div class="common-content-wrap">
      <TrTable
        ref="trTable"
        isNeedSelection
        :btnList="btnList"
        :total="totalNum"
        v-model="searchParams"
        :searchShowList="searchShowList"
        :tableColumn="tableColumn"
        requestName="getMenuList"
        :tableData="assTableData"
        @delete="operateHandle($event, 'delete')"
        @rowDelete="operateHandle($event, 'rowDelete')"
        @add="operateHandle($event, 'add')"
        @rowEdit="operateHandle($event, 'rowEdit')"
        @roleSet="operateHandle($event, 'roleSet')"
      />
    </div>
    <TrEditPopup
      v-model="isShowEdit"
      :title="checkTitle"
      :valueObj.sync="formObj"
      :formData="formData"
      :list="popupList"
      @close="isShowEdit = false"
      @confrim="confrimHandle"
    />
    <TrEditPopup
      v-model="isShowRolePopup"
      title="权限设置"
      :width="480"
      :formData="{}"
      :valueObj.sync="powerObj"
      :list="powerList"
      @close="isShowRolePopup = false"
      @confrim="powerHandle"
    />
  </div>
</template>

<script>
import TrTable from "@/components/Tr-table/Tr-table.vue";
import TrEditPopup from "@/components/Tr-edit/Tr-edit-popup.vue";
import {
  getRoleList,
  remove,
  add,
  grantTree,
  grant,
  getRole,
} from "@/api/system/role";
import { getTenantList } from "@/api/system/tenant";
export default {
  components: {
    TrTable,
    TrEditPopup,
  },
  name: "RoleBox",
  data: () => ({
    powerList: [
      {
        label: "菜单配置",
        type: "treeMultiple",
        width: 100,
        value: [],
        id: "menuIds",
        list: [],
        checkStrictly: false,
      },
    ],
    powerObj: {},
    tableColumn: [
      {
        type: "text",
        label: "角色名称",
        value: "roleName",
      },
      // {
      //   type: "text",
      //   label: "隶属企业",
      //   value: "tenantName",
      // },
      {
        type: "text",
        label: "组织架构",
        value: "factoryName",
      },
      {
        type: "text",
        label: "角色别名",
        value: "roleAlias",
      },
      {
        type: "text",
        label: "角色编码",
        value: "roleCode",
      },
      {
        type: "text",
        label: "启停状态",
        value: "isEnabledName",
      },
      {
        type: "text",
        label: "描述",
        value: "remark",
      },
      {
        type: "option",
        label: "操作",
        width: 120,
        showBtnList: [
          {
            label: "编辑",
            option: "rowEdit",
          },

          {
            label: "删除",
            option: "rowDelete",
          },
        ],
      },
    ],
    searchShowList: [
      {
        id: "roleName",
        type: "input",
        width: 33.33,
        label: "角色名称",
        value: "",
      },
      // {
      //   id: "tenantId",
      //   type: "select",
      //   width: 33.33,
      //   label: "隶属企业",
      //   value: "",
      // },
      {
        label: "组织架构",
        width: 33.33,
        value: "",
        id: "factoryId",
        type: "loadselect",
        selectedLabel: "",
        defaultParams: {
          orgLevelCode: "FACTORY",
        },
        requestObj: {
          url: "/api/trio-system/prod-org/page",
          method: "post",
          searchKey: "orgName",
          rlLabel: "orgName",
          rlValue: "id",
          resultKey: "data,data,records",
        },
      },
      {
        id: "roleCode",
        type: "input",
        width: 33.33,
        label: "角色编码",
        value: "",
      },
    ],
    popupList: [
      {
        label: "角色名称",
        type: "input",
        width: 50,
        value: "",
        id: "roleName",
      },
      {
        label: "角色别名",
        type: "input",
        width: 50,
        value: "",
        id: "roleAlias",
      },
      {
        label: "角色编码",
        type: "input",
        width: 50,
        value: "",
        id: "roleCode",
        disabled: false,
      },
      // {
      //   label: "隶属企业",
      //   type: "select",
      //   width: 50,
      //   value: "",
      //   id: "tenantId",
      //   list: [],
      // },
      {
        label: "组织架构",
        width: 50,
        value: "",
        id: "factoryId",
        type: "loadselect",
        selectedLabel: "",
        defaultParams: {
          orgLevelCode: "FACTORY",
        },
        requestObj: {
          url: "/api/trio-system/prod-org/page",
          method: "post",
          searchKey: "orgName",
          rlLabel: "orgName",
          rlValue: "id",
          resultKey: "data,data,records",
        },
      },
      {
        label: "启停状态",
        type: "radio",
        width: 50,
        value: 1,
        id: "isEnabled",
        list: [
          {
            label: "启用",
            value: 1,
          },
          {
            label: "停用",
            value: 2,
          },
        ],
      },
      {
        label: "角色描述",
        type: "textarea",
        width: 100,
        value: "",
        id: "remark",
        isNeed: false,
      },
    ],
    btnList: [
      {
        label: "新增",
        option: "add",
        color: "blue",
      },
      {
        label: "删除",
        option: "delete",
        color: "white",
        isRelaTable: true,
      },
      {
        label: "权限设置",
        option: "roleSet",
        color: "white",
        isRelaTable: true,
      },
    ],
    assTableData: [],
    checkList: [],
    formObj: {
      systemCode: "TRIO_SYS_000",
    },
    formData: {},
    searchParams: {
      current: 1,
      size: 10,
    },
    totalNum: 0,
    currentHandle: "add",
    isShowEdit: false,
    isShowRolePopup: false,
  }),
  computed: {
    checkTitle() {
      return this.currentHandle == "add" ? "新增" : "编辑";
    },
    ids() {
      return this.$refs.trTable.selectionList.map((item) => item.id);
    },
  },
  methods: {
    async powerHandle() {
      console.log(this.powerObj, "ppp");
      let res = await grant(this.ids, this.powerObj.menuIds);
      if (res.data.code != 200) return;
      this.$message.success(this.$t("msg.success"));
      this.isShowRolePopup = false;
      this.$refs.trTable.clearSelect();
    },
    async operateHandle(val, type) {
      this.currentHandle = type;
      this.formData = type == "rowEdit" ? val : {};
      const roColumn = this.$findByProperty(this.popupList, "id", "roleCode");
      roColumn.disabled = type == "rowEdit";
      const faColumn = this.$findByProperty(this.popupList, "id", "factoryId");
      faColumn.selectedLabel = type == "rowEdit" ? val.factoryName : "";
      switch (type) {
        case "delete":
          this.remove(this.ids);
          return;
        case "roleSet": {
          let res = await grantTree();
          let roRes = await getRole(this.ids.join(","));
          const meColumn = this.$findByProperty(
            this.powerList,
            "id",
            "menuIds"
          );
          meColumn.list = res.data.data.menu;
          meColumn.value = roRes.data.data.menu;
          console.log(meColumn.value, "meColumn.value");
          this.isShowRolePopup = true;
          return;
        }
        case "rowDelete":
          this.remove([val.id]);
          return;
      }
      this.isShowEdit = true;
    },
    confrimHandle() {
      if (this.currentHandle == "rowEdit") {
        this.formObj.id = this.formData.id;
      }
      this.add(this.formObj);
    },
    searchHandle() {
      console.log("查询", this.searchParams);
    },
    remove(ids) {
      this.$textShow({
        title: this.$t("tip.label"),
        content: [this.$t("tip.delete")],
      })
        .then(async () => {
          let res = await remove(ids);
          if (res.data.code != 200) return;
          this.$message.success(this.$t("msg.success"));
          this.$refs.trTable.clearSelect();
          this.getMenuList();
        })
        .catch(() => {});
    },
    add(row) {
      add(row).then((res) => {
        if (res.data.code != 200) return;
        this.isShowEdit = false;
        this.formObj = {};
        this.getMenuList();
        this.$message.success(this.$t("msg.success"));
      });
    },
    getMenuList() {
      getRoleList(this.searchParams).then((res) => {
        if (res.data.code != 200) return;
        let data = res.data.data;
        this.$validateData(data);
        this.assTableData = data.records;
        this.assTableData.forEach((item) => {
          item["isEnabledNameColor"] =
            {
              1: "#00A870",
              2: "#E34D59",
            }[item.isEnabled] || "";
        });
        this.totalNum = data.total;
      });
    },
    getTenantList() {
      getTenantList().then((res) => {
        if (res.data.code != 200) return;
        let list = res.data.data.records.map((item) => {
          return {
            label: item.tenantName,
            value: item.tenantId,
          };
        });
        const column = this.$findByProperty(this.popupList, "id", "tenantId");
        column.list = list;
        const teColumn = this.$findByProperty(
          this.searchShowList,
          "id",
          "tenantId"
        );
        this.$set(teColumn, "list", list);
      });
    },
  },
  created() {
    // this.getMenuList();
    // this.getTenantList();
  },
};
</script>

<style></style>
